<template>
  <div v-if="permissionsLists(33)">
    <page-header :title="$t('m.Station_stations')" :has-return="false">
      <el-button
        type="primary"
        @click="exportBtn"
        v-if="userType == 1 && permissionsLists(235)"
      >
        {{ $t('m.Import_Station') }}
      </el-button>
      <el-button
        type="primary"
        @click="stationClick('0', '')"
        v-if="permissionsLists(177)"
      >
        {{ $t('m.Assign_station') }}
      </el-button>
    </page-header>
    <div class="container">
      <div class="list_div">
        <div class="page_list_div">
          <el-form class="page_list_top" label-position="right">
            <el-form-item :label="$t('m.search_') + ':'" class="page_list_top">
              <el-input
                :placeholder="$t('m.Station_List_placeholder')"
                prefix-icon="el-icon-search"
                style="width:300px;"
                clearable
                v-model="params.search"
              />
            </el-form-item>

            <el-form-item
              :label="$t('m.Station_LockStatus') + ':'"
              class="page_list_top"
            >
              <el-select
                v-model="params.customizeState"
                ref="select1"
                @change="searchClick('', 1)"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('m.invite_Type') + ':'"
              class="page_list_top"
            >
              <el-select
                v-model="params.isScreen"
                ref="select2"
                @change="searchClick('', 2)"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('m.Station_Status') + ':'"
              class="page_list_top"
            >
              <el-select
                v-model="params.state"
                ref="select3"
                @change="searchClick('', 3)"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="page_list_top page_list_search">
              <el-button
                class="search_button reset_button"
                @click="searchClick('')"
                >{{ $t('m.search_') }}</el-button
              >
            </el-form-item>
            <el-form-item class="page_list_top page_list_search">
              <el-button class="reset_button" @click="searchClick('1')">{{
                $t('m.refresh')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-divider class="el_divider"></el-divider>
        <div class="el_table_div">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              :label="item.label"
              :name="item.value"
              v-for="item in stateOption"
              :key="item.value"
            ></el-tab-pane>
          </el-tabs>
          <el-table :data="page.records" key="0">
            <el-table-column
              prop="cabinetNo"
              :label="$t('m.Station_SN')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column prop="imei" label="IMEI" min-width="120">
            </el-table-column>
            <el-table-column
              prop="deviceCount"
              :label="$t('m.Station_List_placeholder_Device_info')"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="rentTime"
              :label="$t('m.Station_List_Available_to_rent_return')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.available }} / {{ scope.row.canReturn }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="abnormalCount"
              :label="$t('m.Exception_alerts')"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="lowPower"
              :label="$t('m.Station_List_Lower_battery_level')"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="damaged"
              :label="$t('m.Station_List_Reported_faulty')"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="agentName"
              :label="$t('m.Shop_Details_Franchisee')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.agentName | strFormat }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="branchName"
              :label="$t('m.Shop_name')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.branchName | strFormat }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="customizeState"
              :label="$t('m.Station_LockStatus')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.customizeState | stateFormat(options1) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="isScreen"
              :label="$t('m.invite_Type')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.isScreen | stateFormat(options2) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="programTitle"
              :label="$t('m.program_title')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.programTitle | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="state"
              :label="$t('m.Station_Status')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.state | stateFormat(options3) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="url"
              :label="$t('m.Station_List_QR_code')"
              min-width="120"
            >
              <template slot-scope="scope">
                <el-image
                  style="width: 44px; height: 44px"
                  :src="scope.row.url"
                  :preview-src-list="[scope.row.url]"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              :label="$t('m.Users_Details_Operation')"
              min-width="104"
              v-if="isArrayEqual([34, 35, 36, 176, 177, 237, 238, 239], permissionsLists)"
            >
              <template slot-scope="scope">
                <el-dropdown placement="bottom">
                  <img
                    src="@/assets/imgs/ic_operation.svg"
                    alt=""
                    class="dropdown_img"
                  />
                  <el-dropdown-menu
                    slot="dropdown"
                    style="white-space: nowrap !important;"
                  >
                    <el-dropdown-item
                      @click.native="detailClick(scope.row.cabinetNo)"
                      v-if="permissionsLists(34)"
                      >{{ $t('m.Details') }}</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="
                        dialogClick(
                          scope.row.customizeState == 1 ? 1 : 2,
                          scope.row
                        )
                      "
                      v-if="permissionsLists(35)"
                      >{{
                        scope.row.customizeState == 1
                          ? $t('m.Station_LockStatus_Lock')
                          : $t('m.Station_List_Unlock')
                      }}</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="dialogClick(3, scope.row)"
                      v-if="
                        (scope.row.state == 1 || scope.row.state == 3) &&
                          permissionsLists(36)
                      "
                      >{{ $t('m.Station_Ejectall') }}</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="dialogClick(4, scope.row)"
                      v-if="
                        (scope.row.state == 1 || scope.row.state == 3) &&
                          permissionsLists(176)
                      "
                      >{{ $t('m.Station_refreshBattery') }}</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="stationClick('0', scope.row)"
                      v-if="permissionsLists(177)"
                      >{{ $t('m.Assign_station') }}</el-dropdown-item
                    >
                    <!-- <el-dropdown-item @click.native="dialogClick(5, scope.row)"
                      >{{ $t('m.delete') }}</el-dropdown-item
                    > -->
                    <el-dropdown-item
                      @click.native="setWifi(scope.row)"
                      :disabled="scope.row.state != 1"
                      v-if="permissionsLists(238)"
                      >{{ $t('m.Wifi_config') }}</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-if="permissionsLists(237)"
                      :disabled="scope.row.state != 1"
                      @click.native="dialogClick(6, scope.row)"
                      >{{ $t('m.Restart_station') }}</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-if="permissionsLists(239)"
                      :disabled="scope.row.state != 1"
                      @click.native="dialogClick(7, scope.row)"
                      >{{ $t('m.Volume_control') }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <emptydata
              slot="empty"
              v-if="!page.records || page.records.length == 0"
            />
          </el-table>
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="page.size"
            :current-page.sync="page.current"
            layout="total, sizes, prev, pager, next, jumper"
            :pager-count="5"
            :total="page.total"
            class="el_pagination"
            @size-change="changePageSize"
            @current-change="changePageNum"
            v-show="page.total > 0"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 划拨机柜 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="stationDialog"
      :title="stationType | stateFormat(stationTitle)"
      :width="stationType == '4' ? '646px' : '520px'"
      top="200px"
      append-to-body
    >
      <div class="dialog_content" v-if="stationType == '0'">
        <div class="dialog_content1">
          {{ $t('m.pleaseChoose') }}
        </div>
        <div class="dialog_content1" style="padding:0;">
          <el-radio
            style="margin-bottom:12px;"
            v-model="radios"
            label="1"
            v-if="userType == 1 || (userType == 2 && agentLevel == 1)"
            >{{ $t('m.Assign_to_franchisee') }}</el-radio
          >
          <el-radio style="margin-bottom:12px;" v-model="radios" label="2">{{
            $t('m.Assign_to_merchant')
          }}</el-radio>
          <el-radio style="margin-bottom:12px;" v-model="radios" label="3">{{
            $t('m.Recycle_to_inventory')
          }}</el-radio>
        </div>
      </div>
      <div
        class="dialog_content"
        v-if="stationType == '1' || stationType == '2'"
      >
        <div class="dialog_content1">
          {{
            stationType == '1'
              ? $t('m.Station_Selecttheagent')
              : $t('m.Select_merchant')
          }}
        </div>
        <div class="dialog_content3">
          <el-form style="width:100%">
            <el-form-item>
              <el-select
                v-model="bindParams.id"
                :placeholder="$t('m.pleaseChoose')"
                style="width:100%"
                filterable
              >
                <el-option
                  style="width:478px"
                  v-for="item in agentOptions"
                  :disabled="
                    (stationType == '1' && stationRow.agentId == item.id) ||
                      (stationType == '2' && stationRow.branchId == item.id)
                  "
                  v-show="
                    (stationType == '1' && stationRow.agentId != item.id) ||
                      (stationType == '2' && stationRow.branchId != item.id)
                  "
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialog_content" v-if="stationType == '3'">
        <div class="dialog_content1">
          {{ $t('m.Confirm_recycle_inventory') }}
        </div>
      </div>
      <div class="dialog_content" v-if="stationType == '4'">
        <div class="dialog_content1 dialog_content4">
          <el-transfer
            filterable
            :filter-placeholder="$t('m.Station_SN')"
            v-model="scanList"
            :titles="[$t('m.Station_list'), $t('m.Station_assigned')]"
            :data="stations"
            :render-content="renderContent"
          >
          </el-transfer>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            stationType == '0' || stationType == '4' ? cancelBtn() : lastStep()
          "
          class="cancel_btn"
          >{{
            stationType == '0' || stationType == '4'
              ? $t('m.cancel')
              : $t('m.Back')
          }}</el-button
        >
        <el-button
          @click="stationType == '0' ? nextBtn() : confirm()"
          class="cancel_btn confirm_btn"
          >{{ stationType == '0' ? $t('m.Next') : $t('m.confirm_') }}</el-button
        >
      </span>
    </el-dialog>

    <!-- 锁定、解锁、一键全弹、刷新、删除、机柜重启 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="operateDialog"
      :title="dialogType | stateFormat(optionsTitle)"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ dialogType | stateFormat(optionsText) }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="operateDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="changeStation" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 音量调节 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="volumeDialog"
      :title="$t('m.Volume_control')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          <el-form
            style="width:100%"
            ref="volumeForm"
            :model="volumeForm"
            :rules="rules"
          >
            <el-form-item prop="volume">
              <el-input
                v-model="volumeForm.volume"
                clearable
                :placeholder="$t('m.Please_enter')"
                @input="editvolume"
                :maxlength="3"
                style="width:100%"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="volumeDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="changevolume" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- wifi配置 -->
    <el-dialog
      :title="$t('m.Wifi_config')"
      :visible.sync="dialogWifi"
      :close-on-click-modal="false"
      width="520px"
    >
      <div class="dialog_content">
        <el-form ref="wifiForm" :model="wifiForm" :rules="rulesForm">
          <div class="dialog_content1">
            {{ $t('m.Wifi_name') }}
          </div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item class="establish_item" prop="ssid" style="width:100%">
              <el-input
                v-model="wifiForm.ssid"
                clearable
                :maxlength="32"
                :placeholder="$t('m.Please_enter')"
              ></el-input>
            </el-form-item>
          </div>
          <div class="dialog_content1">
            {{ $t('m.Password') }}
            <div
              style="padding-top:4px; font-size: 12px;font-weight: 400;text-align: left;color: #646b80;line-height: 16px;"
            >
              *{{ $t('m.Wifi_password_tip') }}
            </div>
          </div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item
              class="establish_item"
              prop="password"
              style="width:100%"
            >
              <el-input
                v-model="wifiForm.password"
                clearable
                :maxlength="63"
                :minlength="6"
                :placeholder="$t('m.Please_enter')"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <el-button
          type="text"
          style="cursor: pointer; text-decoration: underline;  color: var(--text-color);"
          @click="wifiReset"
          >{{ $t('m.Wifi_password_initial') }}</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="wifiConfirm"
          class="cancel_btn confirm_btn"
          >{{ $t('m.Wifi_save') }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 导入机柜 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="exportDialog"
      :title="$t('m.Import_Station')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div
          class="dialog_content1"
          style="display: flex; align-items: center;justify-content: center;"
        >
          <el-upload
            action="/manage/excel"
            :show-file-list="false"
            :on-change="handleChange"
            :headers="platformId"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :file-list="fileList"
          >
            <el-button class="upload_btn">
              {{ $t('m.clickUpload') }}
            </el-button>
          </el-upload>
        </div>
        <div
          class="dialog_content1"
          @click="exportExcel"
          style="display: flex; align-items: center;justify-content: center;color:var(--text-color);cursor: pointer;"
        >
          {{ $t('m.downloadTemplate') }}
        </div>
        <div
          class="dialog_content1"
          v-if="showResult"
          style="display: flex; align-items: center;justify-content: center;"
        >
          <img
            src="@/assets/imgs/payment_ic_success@2x.png"
            alt=""
            width="14px"
            style="margin-right:8px"
          />{{ $t('m.Import_success') }}:{{ result.succCount }}
        </div>
        <div
          class="dialog_content1"
          v-if="showResult"
          style="display: flex; align-items: center;justify-content: center;"
        >
          <img
            src="@/assets/imgs/payment_ic_fail@2x.png"
            alt=""
            width="14px"
            style="margin-right:8px"
          />{{ $t('m.Import_failure') }}:{{ result.errCount }}
        </div>
      </div>
      <div class="dialog_content" v-if="showResult">
        <div class="el_table_div" style="padding:0;">
          <el-table
            :data="
              result.cabinetExcelDTO.slice(
                (tbPage.currentPage - 1) * tbPage.pagesize,
                tbPage.currentPage * tbPage.pagesize
              )
            "
            border
          >
            <el-table-column
              prop="cabinetNo"
              :label="$t('m.Station_SN')"
              min-width="80"
            >
            </el-table-column>
            <el-table-column
              prop="remark"
              :label="$t('m.Station_Add_reason')"
              min-width="160"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :page-sizes="[5]"
            :page-size="5"
            :current-page.sync="tbPage.currentPage"
            layout=" prev, pager, next"
            :pager-count="5"
            :total="result.cabinetExcelDTO.length"
            style="margin-right:-5px;"
            class="el_pagination"
            v-show="result.cabinetExcelDTO.length > 0"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import page from '@/mixins/page'

export default {
  mixins: [page],
  data () {
    return {
      params: {
        search: '', //模糊查询
        customizeState: '', //1-正常 2-锁定
        isScreen: '', //0-不带屏 1-带屏
        state: '', //0-离线 1-在线 2-已迁移 3-待激活
        shopGoods: '', //0-离线 1-在线 2-已迁移 3-待激活
        cabinetType: ''
      },
      options1: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 1,
          label: this.$t('m.Users_Status_Dropdown_Normal')
        },
        {
          value: 2,
          label: this.$t('m.Station_LockStatus_Lock')
        }
      ],
      options2: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 1,
          label: this.$t('m.Advertising_screen')
        },
        {
          value: 0,
          label: this.$t('m.Without_screen')
        }
      ],
      options3: [
        {
          value: '',
          label: this.$t('m.all')
        },
        // {
        //   value: 3,
        //   label: '待激活'
        // },
        {
          value: 1,
          label: this.$t('m.Station_Status_On')
        },
        {
          value: 0,
          label: this.$t('m.Station_Status_Off')
        }
        // {
        //   value: 2,
        //   label: '已迁移'
        // }
      ],
      optionsTitle: [
        {
          value: 1,
          label: this.$t('m.Station_LockStatus_Lock')
        },
        {
          value: 2,
          label: this.$t('m.Station_List_Unlock')
        },
        {
          value: 3,
          label: this.$t('m.Station_Ejectall')
        },
        {
          value: 4,
          label: this.$t('m.Station_refreshBattery')
        },
        {
          value: 5,
          label: this.$t('m.delete')
        },
        {
          value: 6,
          label: this.$t('m.Restart_station')
        },
      ],
      optionsText: [
        {
          value: 1,
          label: this.$t('m.Station_switch')
        },
        {
          value: 2,
          label: this.$t('m.Station_unlock')
        },
        {
          value: 3,
          label: this.$t('m.Station_dispose')
        },
        {
          value: 4,
          label: this.$t('m.Station_Confirm_to')
        },
        {
          value: 5,
          label: this.$t('m.Station_List_Confirm_Delete')
        },
        {
          value: 6,
          label: this.$t('m.Restart_station_sure')
        }
      ],
      stationTitle: [
        {
          value: '0',
          label: ''
        },
        {
          value: '1',
          label: this.$t('m.Assign_station')
        },
        {
          value: '2',
          label: this.$t('m.Assign_station')
        },
        {
          value: '3',
          label: this.$t('m.Recycle_to_inventory')
        },
        {
          value: '4',
          label: this.$t('m.Station_Please_choose')
        }
      ],
      stationDialog: false, //机柜弹窗
      operateDialog: false, //锁定、解锁、一键全弹、刷新、删除弹窗
      exportDialog: false, //导入机柜弹出
      radios: '', //划拨机柜类型
      dialogType: '', //操作弹窗内容类型
      stationType: '', //划拨机柜内容类型
      fileList: [], //上传的文件
      stationRow: '', //选中机柜
      platformId: {
        'platform-id': parseInt(sessionStorage.getItem('platformId')),
        add: this.$cache.getLang(),
        'brezze-language':
          this.$cache.getLang() == 'CN' ? 'ZH' : this.$cache.getLang()
      },
      result: {
        cabinetExcelDTO: []
      }, //文件回调
      showResult: false, //显示文件结果列表
      tbPage: {
        currentPage: 1,
        pagesize: 5
      }, //文件页码
      agentOptions: [], //下拉代理/商铺
      bindParams: {
        id: '',
        list: '', //机柜编号集合
        type: '' //类型：1-绑定代理 2-绑定网点
      },
      stations: [], //穿梭框机柜列表
      scanList: [], //穿梭框机柜选中列表
      activeName: '99',
      //激活状态
      stateOption: [
        {
          value: '99',
          label: this.$t('m.all')
        },

        {
          value: '1',
          label: this.$t('m.Activated')
        },
        {
          value: '2',
          label: this.$t('m.agency_activated')
        },
        {
          value: '3',
          label: this.$t('m.Inventory')
        }
      ],
      dialogWifi: false,
      wifiForm: {
        cabinetNo: '',
        password: '',
        ssid: ''
      },
      rulesForm: {
        ssid: [
          {
            required: true,
            message: this.$t('m.Wifi_name_enter'),
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('m.Wifi_password_enter'),
            trigger: 'blur'
          },
          {
            min: 6,
            max: 63,
            message: this.$t('m.Wifi_password_length'),
            trigger: 'blur'
          }
        ]
      },
      volumeDialog: false,
      volumeForm: {
        volume: ''
      },
      rules: {
        volume: this.$rule.required
      },
      permissionsIds: [], //权限id
      userType: this.getUserType(), //用户类型
      agentLevel: this.getAgentLevel() //代理商等级
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(33)) {
      return
    }
    this.activeName = this.params.shopGoods == '' ? '99' : this.params.shopGoods
    this.getStationLists()
  },
  mounted () {},
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    //切换tab
    handleClick (tab) {
      this.params.shopGoods = tab.name == '99' ? '' : tab.name
      this.page.current = 1
      this.remPageNum()
      this.getStationLists()
    },
    // 搜索/重置
    searchClick (reset, e) {
      // 是否重置
      let size = this.page.size
      this.page = this.$options.data.call(this).page
      if (reset) {
        this.params = this.$options.data.call(this).params
        this.activeName = '99'
        this.remPageNum()
      } else {
        this.page.size = size
        this.setPageNum(this.page.current, this.page.size, this.params)
      }
      this.$nextTick(() => {
        e ? this.$refs[`select${e}`].blur() : ''
      })
      this.getStationLists()
    },
    //获取机柜列表
    getStationLists () {
      this.$api.equipment.getStationList(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
          this.page.records.forEach(item => {
            this.$set(
              item,
              'url',
              this.scanaQRcode(
                this.conf['station-qr-code-prefix'] +
                  'device/cabinet.html?sno=' +
                  item.cabinetNo
              )
            )
          })
        }
      })
    },
    // 每页数
    changePageSize (val) {
      this.page.current = 1
      this.page.size = val
      this.getStationLists()
    },
    // 当前页
    changePageNum (val) {
      this.page.current = val
      this.getStationLists()
    },

    //机柜详情
    detailClick (cabinetNo) {
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/device/stations/detail',
        query: { cabinetNo: cabinetNo }
      })
    },

    //锁定、解锁、一键全弹、刷新、删除、机柜重启
    dialogClick (e, item) {
      this.dialogType = e
      this.stationRow = item
      if (this.dialogType == 4) {
        this.changeStation()
      } else if (this.dialogType == 7) {
        this.volumeDialog = true
        this.volumeForm.volume = item.volume ? item.volume : ''
      } else {
        this.operateDialog = true
      }
    },
    //操作按钮
    changeStation () {
      this.$openLoading()
      if (this.dialogType == 5) {
        this.delCabinet()
      } else if (this.dialogType == 4) {
        this.stationRefresh()
      } else if (this.dialogType == 3) {
        this.stationEjectAll()
      } else if (this.dialogType == 6) {
        this.resetStation()
      } else {
        this.stationLock()
      }
    },
    //操作按钮结果
    getRes (res) {
      if (this.$ok(res)) {
        this.$message.success(res.message)
        this.getStationLists()
        this.operateDialog = false
        this.volumeDialog = false
        this.$closeLoading()
      } else {
        this.$message.error(res.message)
        this.$closeLoading()
      }
    },
    //删除机柜
    delCabinet () {
      this.$api.equipment.delCabinet(this.stationRow.id).then(res => {
        this.getRes(res)
      })
    },
    //刷新电量
    stationRefresh () {
      this.$api.equipment
        .stationRefresh(this.stationRow.cabinetNo)
        .then(res => {
          this.getRes(res)
        })
    },
    //一键全弹
    stationEjectAll () {
      this.$api.equipment
        .stationEjectAll(this.stationRow.cabinetNo)
        .then(res => {
          this.getRes(res)
        })
    },
    //锁定/解锁
    stationLock () {
      let params = {
        cabinetNo: this.stationRow.cabinetNo,
        customizeState: this.dialogType == 1 ? 2 : 1
      }
      this.$api.equipment.stationLock(params).then(res => {
        this.getRes(res)
      })
    },

    //划拨弹窗
    stationClick (e, item) {
      this.radios = ''
      this.stationType = e
      this.stationRow = item
      this.stationDialog = true
      this.bindParams = this.$options.data.call(this).bindParams
      this.stationTitle[0].label = this.$t('m.Assign_station')
    },
    //获取代理
    getAgents () {
      this.$api.equipment.getAgent().then(res => {
        if (this.$ok(res)) {
          this.agentOptions = res.data
        }
      })
    },
    //获取店铺
    getShops () {
      this.$api.equipment.getShop().then(res => {
        if (this.$ok(res)) {
          this.agentOptions = res.data
        }
      })
    },
    //获取机柜
    getCabinets () {
      this.stations = []
      let params = {
        type: this.radios == '3' ? 3 : 1
        // branchId: this.radios == '2' ? this.bindParams.id : '',
        // agentId: this.radios == '1' ? this.bindParams.id : ''
      }
      this.$api.shop.getCabinetsList(params).then(res => {
        if (this.$ok(res)) {
          res.data.forEach(item => {
            this.stations.push({
              label: item.cabinetNo,
              key: item.cabinetNo,
              deviceCount: item.deviceCount,
              isScreen: item.isScreen
            })
            this.scanList = []
          })
        }
      })
    },

    renderContent (h, option) {
      return (
        <span>
          <span
            class='label'
            style='font-size: 12px !important;line-height: 14px !important;'
          >
            {option.label}
            <span style='padding:0 2px;'>·</span>
            {option.deviceCount}
            {this.$t('m.Station_List_placeholder_Device_info')}
          </span>
          <br />
          <span
            class='name'
            style='font-size: 12px !important;line-height: 14px !important; color:#888888;'
          >
            {option.isScreen == 0
              ? this.$t('m.Without_screen')
              : this.$t('m.Advertising_screen')}
          </span>
        </span>
      )
    },
    //下一步
    nextBtn () {
      if (!this.radios) {
        this.$message({
          message: this.$t('m.pleaseChoose'),
          type: 'warning'
        })
        return
      }
      this.bindParams = this.$options.data.call(this).bindParams
      this.stationType = this.radios
      this.bindParams.type = Number(this.radios)
      if (this.radios == '1') {
        this.getAgents()
      } else {
        this.getShops()
      }
    },
    //确定
    confirm () {
      //
      // console.log(this.stationRow)
      if (
        (this.stationType == '1' || this.stationType == '2') &&
        !this.bindParams.id
      ) {
        this.$message({
          message:
            this.stationType == '1'
              ? this.$t('m.Station_Selecttheagent')
              : this.$t('m.Select_merchant'),
          type: 'warning'
        })
        return
      }
      if (
        (this.stationType == '1' || this.stationType == '2') &&
        this.bindParams.id &&
        this.stationRow != ''
      ) {
        this.bindingTypes()
        return
      }
      if (
        (this.stationType == '1' || this.stationType == '2') &&
        this.bindParams.id &&
        this.stationRow == ''
      ) {
        this.getCabinets()
        this.stationType = '4'
        return
      }
      if (this.stationType == '3' && this.stationRow != '') {
        this.recycleStations()
        return
      }
      if (this.stationType == '3' && this.stationRow == '') {
        this.getCabinets()
        this.stationType = '4'
        return
      }
      if (this.stationType == '4') {
        if (this.scanList.length == 0 && this.stations.length > 0) {
          this.$message({
            message: this.$t('m.Station_Please_choose'),
            type: 'warning'
          })
          return
        }
        if (this.stations.length == 0) {
          this.$message({
            message: this.$t('m.noData'),
            type: 'warning'
          })
          return
        }
        if (this.radios == '3') {
          this.recycleStations()
        } else {
          this.bindingTypes()
        }
      }
    },
    // 机柜绑定到代理-网点
    bindingTypes () {
      if (this.stationRow != '') {
        this.bindParams.list = [this.stationRow.cabinetNo]
      } else {
        this.bindParams.list = this.scanList
      }
      this.$api.equipment.bindingType(this.bindParams).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.stationDialog = false
          this.getStationLists()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //收回机柜
    recycleStations () {
      let params
      if (this.stationRow != '') {
        params = [this.stationRow.cabinetNo]
      } else {
        params = this.scanList
      }
      this.$api.equipment.recycleStation(params).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.stationDialog = false
          this.getStationLists()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //取消
    cancelBtn () {
      this.stationDialog = false
    },
    //上一步
    lastStep () {
      this.stationType = '0'
    },

    // 打开wifi设置
    setWifi (item) {
      if (item.state != 1) {
        return
      }
      this.$api.equipment.getWifiConfig(item.cabinetNo).then(res => {
        if (this.$ok(res)) {
          this.dialogWifi = true
          this.wifiForm.cabinetNo = item.cabinetNo
          this.wifiForm.ssid = res.data.wifiSsid
          this.wifiForm.password = res.data.wifiPassword
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 重置wifi
    wifiReset () {
      this.$api.equipment.resetWifiConfig(this.wifiForm.cabinetNo).then(res => {
        if (this.$ok(res)) {
          this.dialogWifi = false
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 保存wifi配置
    wifiConfirm () {
      this.$refs.wifiForm.validate(valid => {
        if (!valid) {
          return
        }
        this.$api.equipment.saveWifiConfig(this.wifiForm).then(res => {
          if (this.$ok(res)) {
            this.dialogWifi = false
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },

    //导入机柜
    exportBtn () {
      this.showResult = false
      this.result = { cabinetExcelDTO: [] }
      this.exportDialog = true
    },
    //下载模板
    exportExcel () {
      this.$openLoading()
      this.$api.equipment.getTemplate().then(res => {
        window.downExcel(res)
        this.$closeLoading()
      })
    },
    //导入回显
    handleChange (file, fileList) {
      var length = fileList.length
      var value = fileList[length - 1]
      var self = this
      if (value.response) {
        var code = value.response.code
        var res = value.response
        if (code == '0' && res.data != null) {
          self.showResult = true
          self.result = {
            cabinetExcelDTO: res.data.cabinetExcelDTO
              ? res.data.cabinetExcelDTO
              : [],
            errCount: res.data.errCount ? res.data.errCount : '0',
            succCount: res.data.succCount ? res.data.succCount : '0'
          }
        } else {
          self.showResult = true
          self.result = {
            cabinetExcelDTO: [],
            errCount: '0',
            succCount: '0'
          }
        }
        var type = code == '0' ? 'success' : 'error'
        if (code == '0') {
          this.getStationLists()
        }
        this.$message({
          // 弹框
          type: type,
          message: value.response.message
        })
      }
    },
    // 重启机柜
    resetStation () {
      this.$api.equipment.resetStations(this.stationRow.id).then(res => {
        this.getRes(res)
      })
    },

    //确认调节音量
    changevolume () {
      this.$api.equipment.setVolume(this.stationRow.cabinetNo, this.volumeForm.volume).then(res => {
        this.getRes(res)
      })
    },

    editvolume (val) {
      this.volumeForm.volume = this.$check.noZero(val)
      if (this.volumeForm.volume > 100) {
        this.volumeForm.volume = 100
      }
    }
  }
}
</script>
